<link rel="import" href="/bower_components/paper-button/paper-button.html">
<link rel="import" href="/bower_components/paper-tooltip/paper-tooltip.html">
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/ui/elements/flake_detection/flake-score-chart.html">


<dom-module id="rank-flake-item">
  <template>
    <style>
      td {
        max-width: 0;
        padding: 2px;
        padding-right: 10px;
        height: 30px;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
      }

      .rank-button {
        padding: 0px;
        margin: 0px;
        color: #00f;
      }
    </style>
      <td><paper-button class="rank-button" on-tap="showDialog"><u>[[flake.flake_score_last_week]]</u></paper-button>
      <flake-score-chart class="flake_dialog" flake={{flake}} weights=[[weights]]></flake-score-chart>
      </td>
      <td>
        <a target="_blank" href="/p/chromium/flake-portal/flakes/occurrences?key=[[flake.flake_urlsafe_key]]">[[flake.test_label_name]]</a>
        <paper-tooltip position="bottom" offset="0" fit-to-visible-bounds="true">[[flake.test_label_name]]</paper-tooltip>
      </td>
      <td>[[_shortenTimeDelta(flake.time_delta)]] ago
      <paper-tooltip position="bottom" offset="0" fit-to-visible-bounds="true">[[flake.time_delta]] ago</paper-tooltip>
      </td>
      <template is="dom-if" if="[[hasBug(flake)]]">
        <td width="10%">
          <a href="[[flake.flake_issue.issue_link]]">[[flake.flake_issue.issue_id]]</a>
        </td>
        <td width="10%">[[flake.flake_issue.status]]</td>
        <template is="dom-if" if="[[_hasBugUpdateTime(flake)]]">
          <td width="15%">[[_shortenTimeDelta(flake.flake_issue.last_updated_time_in_monorail)]] ago
          <paper-tooltip position="bottom" offset="0" fit-to-visible-bounds="true">[[flake.flake_issue.last_updated_time_in_monorail]] ago</paper-tooltip></td>
        </template>
        <template is="dom-if" if="[[!_hasBugUpdateTime(flake)]]">
          <td width="15%"></td>
        </template>
      </template>
      <template is="dom-if" if="[[! hasBug(flake)]]">
        <td width="10%"></td>
        <td width="10%"></td>
        <td width="15%"></td>
      </template>
    </template>

  <script src="../../js/common.js"></script>
  <script>
    (function () {
      "use strict";

      Polymer({
        is: "rank-flake-item",
        properties: {
          flake: {
            type: Object
          },
          weights: {
            type: Array
          }
        },

        hasBug: function (flake) {
          return (flake.flake_issue != null &&
          flake.flake_issue.issue_id != null);
        },

        _hasBugUpdateTime: function(flake) {
          return (flake.flake_issue != null &&
          flake.flake_issue.last_updated_time_in_monorail != null);
        },

        _shortenTimeDelta: function (delta) {
          return shortenTimeDelta(delta);
        },

        showDialog: function (e) {
          this.shadowRoot.querySelector('.flake_dialog').toggleDialog();
        }
      });
    })();
  </script>
</dom-module>
